<template>
    <div class="addgood">
        <el-steps :active="Number(activeName)" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
            <el-step title="步骤 4"></el-step>
            <el-step title="步骤 5"></el-step>
        </el-steps>
        <template>
            <el-form ref="form" :model="addform" label-width="80px">
                <el-tabs v-model="activeName" @tab-click="handleClick" tab-position='left' style="margin-top:20px">
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称">
                            <el-input label-width="40px" v-model="addform.goods_name"></el-input>
                        </el-form-item>
                        <template>
                            <el-form-item label="商品价格">
                                <el-input-number style="width:100%" v-model="addform.goods_price" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                            </el-form-item>
                        </template>
                        <template>
                            <el-form-item label="商品重量">
                                <el-input-number style="width:100%" v-model="addform.goods_number" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                            </el-form-item>
                        </template>
                        <template>
                            <el-form-item label="商品数量">
                                <el-input-number style="width:100%" v-model="addform.goods_weight" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                            </el-form-item>
                        </template>
                        <el-form-item label="父级名称">
                            <el-cascader :options="options" v-model="selectedOptions" :props='cascaderProps'
                             @change='handleChange'>
                            </el-cascader>
                        </el-form-item>
                        <el-button type="primary" style="float:right" @click='addGoodsSubmit'>提交</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数" name="1">商品价格</el-tab-pane>
                    <el-tab-pane label="商品属性" name="2">
                        <!-- 高德地图插件 -->
                        <div class="amap-wrapper">
                            <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片" name="3">
                        <el-upload class="upload-demo" action="http://localhost:8888/api/private/v1/upload" :before-upload='beforeUpload' :on-success='uploadSuccess' :headers="getToken()" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">
                        <quillEditor style="height:400px">
                            <template>
                                <div class="add-goods">
                                    <el-tabs tab-position="left" class="mt-20">
                                        <el-tab-pane label="商品内容" name="fifth">
                                            <quill-editor v-model="addform.goods_introduce" ref="myQuillEditor" :options="editorOption">
                                            </quill-editor>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </template>
                        </quillEditor>

                    </el-tab-pane>

                </el-tabs>
            </el-form>
        </template>
        <el-dialog :visible.sync="imgVisible" width="70%">
            <img :src="imgsrc" alt="">
        </el-dialog>

    </div>
</template>

<script>
import { categoriesList, addGoods } from '@/api/index.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 富文本编辑器参数
      content: null,
      editorOption: {},
      imgVisible: false,
      // 图片预览路径
      imgsrc: '',
      // 图片列表
      fileList: [],
      activeName: '',
      active: 1,
      addform: {
        goods_name: '',
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [],
        attrs: []
      },
      price: 1,
      weight: 1,
      goodnum: 1,
      options: [],
      selectedOptions: [],
      cascaderProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      }
    }
  },
  methods: {
    // 实现添加商品业务
    addGoodsSubmit () {
      addGoods(this.addform).then(res => {
        if (res.meta.status === 201) {
          this.$message({
            type: 'success',
            message: res.meta.msg
          })
          this.$router.push({path: 'list'})
        } else {
          this.$message({
            type: 'error',
            message: res.meta.msg
          })
        }
      })
    },
    // 图片上传前的函数
    beforeUpload (file) {
      if (file.size > 10000) {
        this.$message({
          type: 'warning',
          message: '图片大小进行10000字节'
        })
        return false
      }
    },
    // 图片上传成功时的函数
    uploadSuccess (response, file, fileList) {
      this.addform.pics.push({ pic: response.data.tmp_path })
      console.log(this.addform.pics)
    },
    // 设置图片上传请求头
    getToken () {
      var token = localStorage.getItem('token')
      return { Authorization: token }
    },
    handleClick (value) {
      console.log(value)
    },
    //   选择分类时触发函数
    handleChange (value) {
      console.log(value)
      this.addform.goods_cat = value.join(',')
      console.log(this.addform.goods_cat)
    },
    // 图片上传
    // 从列表中移出图片
    handleRemove (file, fileList) {
      // 1、这里有个坑,无论图片上传之前有没有阻止，都会执行这块代码，因为阻止上传原理是，从列表中移除
      // 2、当你上传的第一张图片是符合判断的，那么会正常执行，当第二张图片不符合判断，那么就会报file.response.data找不到的错误，所以这里需要再加一个判断
      if (!file.response) {
        return false
      }
      var delIndex = this.addform.pics.findIndex(value => {
        return value.pic === file.response.data.tmp_path
      })
      this.addform.pics.splice(delIndex, 1)
    },
    // 图片预览
    handlePreview (file) {
      this.imgVisible = true
      // 这里需要拼接上服务器地址，否则是基于本地运行地址
      this.imgsrc = 'http://localhost:8888/' + file.response.data.tmp_path
    }
  },
  mounted () {
    categoriesList({ type: 3 }).then(res => {
      this.options = res.data
    })
  }
}
</script>

<style scoped>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>
